import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import './GallerySection.scss';

gsap.registerPlugin(ScrollTrigger);

interface GalleryItem {
  id: number;
  title: string;
  category: string;
  description: string;
}

const GallerySection: React.FC = () => {
  const galleryRef = useRef<HTMLDivElement>(null);
  const titleRef = useRef<HTMLDivElement>(null);
  const gridRef = useRef<HTMLDivElement>(null);

  const galleryItems: GalleryItem[] = [
    { id: 1, title: '山川日落', category: '风景摄影', description: '壮美的自然风光' },
    { id: 2, title: '光影人像', category: '人像摄影', description: '捕捉人物神韵' },
    { id: 3, title: '城市印象', category: '街头摄影', description: '都市生活纪实' },
    { id: 4, title: '星空银河', category: '天文摄影', description: '浩瀚宇宙之美' },
    { id: 5, title: '花卉微距', category: '微距摄影', description: '细致入微的世界' },
    { id: 6, title: '海岸线', category: '风景摄影', description: '海天一色的壮阔' }
  ];

  useEffect(() => {
    const items = gridRef.current?.children;
    if (!items) return;

    // 标题动画
    gsap.fromTo(titleRef.current, 
      { 
        y: 50,
        opacity: 0
      },
      {
        y: 0,
        opacity: 1,
        duration: 1,
        scrollTrigger: {
          trigger: titleRef.current,
          start: 'top 80%',
          end: 'bottom 20%',
          toggleActions: 'play none none reverse'
        }
      }
    );

    // 图片网格动画
    gsap.fromTo(Array.from(items),
      {
        y: 100,
        opacity: 0,
        scale: 0.8
      },
      {
        y: 0,
        opacity: 1,
        scale: 1,
        duration: 1,
        stagger: 0.2,
        ease: 'power2.out',
        scrollTrigger: {
          trigger: gridRef.current,
          start: 'top 80%',
          end: 'bottom 20%',
          toggleActions: 'play none none reverse'
        }
      }
    );

    return () => {
      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
    };
  }, []);

  const handleItemHover = (index: number, isHovering: boolean) => {
    const item = gridRef.current?.children[index] as HTMLElement;
    if (!item) return;

    gsap.to(item, {
      scale: isHovering ? 1.05 : 1,
      y: isHovering ? -10 : 0,
      duration: 0.3,
      ease: 'power2.out'
    });
  };

  return (
    <section ref={galleryRef} className="gallery-section" id="gallery">
      <div className="gallery-container">
        <div ref={titleRef} className="gallery-header">
          <h2>精选作品</h2>
          <p>用镜头记录世界的每一个精彩瞬间</p>
        </div>
        <div ref={gridRef} className="gallery-grid">
          {galleryItems.map((item, index) => (
            <div 
              key={item.id}
              className="gallery-item"
              onMouseEnter={() => handleItemHover(index, true)}
              onMouseLeave={() => handleItemHover(index, false)}
            >
              <div className="item-image">
                <div className="image-placeholder">
                  <span className="image-title">{item.title}</span>
                </div>
                <div className="item-overlay">
                  <div className="overlay-content">
                    <h4>{item.title}</h4>
                    <p className="category">{item.category}</p>
                    <p className="description">{item.description}</p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default GallerySection;